<template>
  <div style=" border-bottom: 1px solid rgba(151, 151, 151, 0.2);" class="from-input-box">
    <div class="from-input-tit cenLeft ">
      <span :class="{'checkNot':!thisComponen.attribute.ifCheck}" :style="[{color:$store.state.themeColor}]" class="from-input-tit-check">
        *
      </span>
      {{ thisComponen.attribute.titName }}
      <div v-if="thisComponen.attribute.filedCode=='uTel'" class="select-phone cenLeft">
        +{{thisComponen.attribute.areaCode}}
        <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
        <co-select v-if='!isReadonly' v-model.trim="thisComponen.attribute.areaCode" style=" cursor: pointer;" title="电话国家码" search-placeholder="请输入" type="popup" :data="selectList" placeholder="请输入" class="from-input co-select-dev" />
      </div>
    </div>
    <!-- onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" -->
    <input :readonly="isReadonly" v-model.trim="thisComponen.attribute.filedValue" style=" text-align: left;" :class="{'haveSelectPhone':thisComponen.attribute.filedCode=='uTel'}" type="input" :placeholder="thisComponen.attribute.placeholder" class="from-input">
  </div>
</template>


<script>
import areaCode from "./../areaCode.json";
export default {
  props: ["thisComponen", "isReadonly"],
  data() {
    return {
      selectList: []
    };
  },
  created() {
    if (this.thisComponen.attribute.filedCode == "uTel") {
      this.selectList = [];
      for (let i = 0; i < areaCode.length; i++) {
        let obj = {
          label: `${areaCode[i].name}(${areaCode[i].tel})`,
          value: areaCode[i].tel
        };
        this.selectList.push(obj);
      }
    }
  }
  // data() {
  //   return {
  //     fileVal: ""
  //   };
  // },
  // watch: {
  //   // 监听是否是数字类型
  //   fileVal(newValue, oldValue) {
  //     if (newValue == undefined) {
  //       newValue = this.thisComponen.attribute.minValue || 0;
  //     }
  //     if (newValue == "0") {
  //       newValue = Number(newValue);
  //     }
  //     // 检测是否是数字
  //     if (isNaN(newValue)) {
  //       this.$toast(`${this.thisComponen.attribute.titName}不是一个纯数字`);
  //       this.fileVal = this.thisComponen.attribute.minValue || 0;
  //       this.thisComponen.attribute.filedValue = this.fileVal;
  //       this.$forceUpdate();
  //       return;
  //     }
  //     // 检测当前值是否大于最大值
  //     if (this.fileVal > this.thisComponen.attribute.maxValue) {
  //       this.$toast(
  //         `${this.thisComponen.attribute.titName}不可以大于${
  //           this.thisComponen.attribute.maxValue
  //         }`
  //       );
  //       this.fileVal = this.thisComponen.attribute.maxValue || 0;
  //       this.thisComponen.attribute.filedValue = this.fileVal;
  //       this.$forceUpdate();
  //       return;
  //     }
  //     // 检测当前值是否小于最小值
  //     if (this.fileVal < this.thisComponen.attribute.minValue) {
  //       this.$toast(
  //         `${this.thisComponen.attribute.titName}不可以小于${
  //           this.thisComponen.attribute.minValue
  //         }`
  //       );
  //       this.fileVal = this.thisComponen.attribute.minValue || 0;
  //       this.thisComponen.attribute.filedValue = this.fileVal;
  //       this.$forceUpdate();
  //       return;
  //     }
  //     // 检测首页是否是0并且第二位不是小数点
  //     let ValString = `"${this.fileVal}"`;
  //     let ValArr = ValString.split("");
  //     if (
  //       ValArr[1] == "0" &&
  //       ValArr[2] &&
  //       ValArr[2] != '"' &&
  //       ValArr[2] != "."
  //     ) {
  //       this.$toast(`${this.thisComponen.attribute.titName}请输入正确的数字`);
  //       this.fileVal = this.thisComponen.attribute.minValue || 0;
  //       this.thisComponen.attribute.filedValue = this.fileVal;
  //       this.$forceUpdate();
  //       return;
  //     }
  //     // 成功赋值
  //     this.thisComponen.attribute.filedValue = this.fileVal;
  //     this.$forceUpdate();
  //   }
  // },
  // created() {
  //   this.fileVal = this.thisComponen.attribute.filedValue;
  // }
};
</script>

<style scoped>
.haveSelectPhone {
  padding-left: 236px;
}
.co-input::after {
  border: none !important;
  height: 0px !important;
}
.co-select-dev {
  width: 100% !important;
  padding-right: 2px;
  padding-left: 2px;
  opacity: 0;
}
</style>
